<template>
<div class="pa">
    <div>
        <search-cmp/>
    </div>
    <div style="display: flex;">
        <div class="hei"  @touchmove="coor" @touchstart="shows" @touchend="hide">
            <img :src="this.sr" class="zs">
            <img :src="this.mask" class="yh">
            <i class="el-icon-arrow-left" @click="jian" @touchmove.stop @touchstart.stop @touchend.stop></i>
            <i class="el-icon-arrow-right" @click="add" @touchmove.stop @touchstart.stop @touchend.stop></i>
        </div>
        <div v-show="this.show" style="z-index:955">
            <div class="delit" :style="{backgroundImage: 'url(' +this.sr+ ')',backgroundSize:'200%'}">
            </div>
        </div>
    </div>
    <div class="gwc">
        <div style="font-size:10px;color:red">{{name}}</div>
        <div style="margin-top:5%">价格：￥{{price}}</div>
        <div style="margin-top:5%">数量：<el-input-number v-model="num" :min="1" :max="10" label="数量"></el-input-number></div>
        <div class="shop" @click="shopBuy">加入购物车</div>
    </div>
    <div class="list">
        <div class="title"><strong>商品照片区</strong></div>
        <img v-for="(p,i) in imgs" :key="i" @click="inde(i,$event)" :class="{active:i===ind}" :src="p" />
    </div>
</div>
</template>

<script>
import SearchCmp from '../components/SearchCmp.vue'
import mask from '../assets/s-mask.png'
import axios from 'axios'
import {mapState} from 'vuex'
import { Toast } from 'mint-ui';
export default {
  components: { SearchCmp },
    data(){
        return{
            imgs:'',
            sr:'',
            ind:0,
            mask,
            show:false,
            price:0,
            num:1,
            name:'',
            id:0
        }
    },
    computed:{
        ...mapState({
            token:state=>state.user.token
        })
    },
    created(){
        let id=this.$route.params.id
        axios({
            'url':`/ms/store/api/product/detail?id=${id}`,
            'Content-Type': 'application/x-www-form-urlencoded',
            'Host': 'music.163.com'
        }).then(({data})=>{
           let {product}=data
           this.imgs=product.picUrls
           this.sr=product.picUrls[0]
           this.price=product.skus[0].spePrice
           this.name=product.name
           this.id=product.id
        })
    },
    methods:{
      inde(i,e){
          console.log(e)
        this.ind=i
        this.sr=e.path[0].src
      },
      add(){
          this.sr=this.imgs[++this.ind]
          if(this.ind>this.imgs.length-1){
              this.ind=0
              this.sr=this.imgs[this.ind]
          }
      },
      jian(){
          this.sr=this.imgs[--this.ind]
          if(this.ind<0){
              this.ind=this.imgs.length-1
              this.sr=this.imgs[this.ind]
          }
      },
      coor(e){
        let x=e.changedTouches[0].clientX
        let y=e.changedTouches[0].clientY
        let cx=e.path[1].getBoundingClientRect().left
        let cy=e.path[1].getBoundingClientRect().top
        let detail=e.target.parentNode.parentNode.lastChild.lastChild
        let tx=x - cx - 50 
        let ty=y - cy - 50
        if(tx < 0){
            tx=0
        }
        if(ty < 0){
            ty=0
        }
        if(tx > 100){
            tx=100
        }
        if(ty > 100){
            ty=100
        }
        detail.style.backgroundPosition=tx/100*100+'%'+ty/100*100+'%'
        e.path[0].style.left=tx + 'px';
        e.path[0].style.top=ty + 'px';
      },
      shows(){
          this.show=true
      },
      hide(){
          this.show=false
      },
      shopBuy(){
          let {name,price,num,sr,imgs,mask,ind,show,id}=this
          if(this.token === null){
            this.$router.push('/login')
          }else{
            axios({
                url:'/ajax/addCart',
                data:{name,price,num,sr,imgs,mask,ind,show,id,token:this.token},
                method:'post'
                }).then(({data})=>{
                    if(data.success){
                        Toast('成功加入购物车')
                    } 
                })
          }
      }
    }
}
</script>

<style lang="scss" scoped>
.el-input-number{
    width:100px;
}
.el-input-number__decrease{
    width:20%;
}
.el-input-number__increase{
    width:20%;
}
.el-input-number{
    width:60%;
}
.active{
    border: 2px solid red;
}
.pa{
    .list{
        position: absolute;
        .title{
            margin-bottom:5px ;
            font-size: 30px;
            text-align: center;
        }
        img{
        width: 50px;
        height: 50px;
        margin-left:5px ;
        } 
    }
    .hei{
        position: relative;
        margin-top:10px;
        font-size: 30px;
        .zs{
            width: 200px;
            height: 200px;
        }
        .yh{
            height: 100px;
            width: 100px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .el-icon-arrow-left{
            position: absolute;
            left: -5px;
            z-index: 888;
            top:88px;
        }
        .el-icon-arrow-right{
            position: absolute;
            left: 178px;
            z-index: 888;
            top: 88px;
        }
    }
    .delit{
        width:200px;
        height:200px;
        margin-top:10px;
    }
    .gwc{
        width:200px;
        height:200px;
        position: relative;
        float: left;
        left: 210px;
        top: -210px;
    }
}
.shop{
    margin: 5% auto;
    width: 80%;
    height: 60px;
    background-color: red;
    border-radius: 10px;
    text-align: center;
    line-height: 60px;
}

</style>